<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=noe">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.4/lib/index.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/index.css">

</head>
<body>
    <div id='app'>
        <!--头部搜索-->
        <div class='header-search-div'>
            <div class='form-search-div'>
                <form action="/" class='form-search'>
                    <i class='iconfont icon-sousuo search-icon'/></i>
                    <input type="text" class='search-inp'
                        v-model='keyword' :placeholder='placeholder'>
                </form>
            </div>
            <div class='cart-icon-div'>
                <i class='iconfont icon-gouwuche cart-icon'></i>
            </div>
        </div>

        <!--首页分类1-->
        <div class='header-sort-div'>
            <van-tabs @click='changeSort'>
                <van-tab v-for="(item,index,key) in sort1"
                    :key='key'
                    :data-index='index'
                    :title="item.text"
                >
                    
                </van-tab>
            </van-tabs>

            <!--分类的内容-->
            <div class='header-sort-content'>
                <!--首页的内容-->
                <div class='content home-content' 
                    :class='{active:chooseIndex==0}'>
                    <!--轮播图-->
                    <van-swipe class='swiper'
                        :autoplay="3000" 
                    >
                        <van-swipe-item v-for="(image, index) in home.banner_imgs" :key="index">
                            <img v-lazy="image" :src='image'/>
                        </van-swipe-item>
                    </van-swipe>

                    <!--列表内容-->
                    <div class='items-list'>
                        <!--本月新品-->
                        <div class='item'>
                            <p class='title'>
                                <img src="../images/xinpin.png" alt="">
                                <span class='text'>本月新品</span>
                            </p>
                            <!--可左右移动的-->
                            <div class='swiper-div'>
                                <van-swipe class='swiper'
                                >
                                    <van-swipe-item v-for="(image, index) in home.swiper_view" :key="index">
                                        <img v-lazy="image" :src='image'/>
                                    </van-swipe-item>
                                </van-swipe>
                            </div>
                            
                        </div>
                        <!--热卖单品-->
                        <div class='item'>
                            <p class='title'>
                                <img src="../images/jiebantubiao-.png" alt="">
                                <span class='text'>热卖单品</span>
                            </p>
                            <div class='hot-lists-div'>
                                <ul>
                                    <li v-for='(item,index,key) in home.hot_goods' :key='key'>
                                        <img :src="item.img" alt="">
                                        <p class='goods_name'>{{item.name}}</p>
                                        <p class='price'>
                                            <span class='money'>￥{{item.price}}</span>
                                            <span class='line_through'>￥{{item.market_pri}}</span>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--学习中心-->
                        <div class='item'>
                            <p class='title'>
                                <img src="../images/sanjiaoxing.png" alt="">
                                <span class='text'>学习中心</span>
                            </p>
                            <div class='study-div'>
                                <img src="../images/study_center.jpg" alt="">
                            </div>
                            
                        </div>
                    </div>
                </div>

                <!--美妆护肤的内容-->
                <div class='content meizhuang-content'
                    :class='{active:chooseIndex==1}'>
                    <ul class='content-ul'>
                        <li v-for='(item,index,key) in home.makeups' :key='key'>
                            <img :src="item.img" alt="">
                            <p class='goods_name'>{{item.goods_name}}</p>
                            <p class='goods_desc'>
                                <span class='desc1'>{{item.desc1}}</span>
                                <span class='desc2'>({{item.desc2}})</span>
                            </p>
                            <p class='buyed'>{{item.buy_num}}人已买</p>
                            <p class='goods_price'>
                                <span class='price'>￥{{item.price}}</span>
                                <span class='origin_price'>原价：<span>￥{{item.market_pri}}</span></span>
                                <span class='buy_btn'>立即购买</span>
                            </p>
                        </li>
                    </ul>
                </div>

                <!--珠宝首饰的内容-->
                <div class='content zhubao-content'
                    :class='{active:chooseIndex==2}'>
                    <ul class='content-ul'>
                        <li v-for='(item,index,key) in home.jewelry' :key='key'>
                            <img :src="item.img" alt="">
                            <p class='goods_name'>{{item.goods_name}}</p>
                            <p class='goods_desc'>
                                <span class='desc1'>{{item.desc1}}</span>
                                <span class='desc2'>({{item.desc2}})</span>
                            </p>
                            <p class='buyed'>{{item.buy_num}}人已买</p>
                            <p class='goods_price'>
                                <span class='price'>￥{{item.price}}</span>
                                <span class='origin_price'>原价：<span>￥{{item.market_pri}}</span></span>
                                <span class='buy_btn'>立即购买</span>
                            </p>
                        </li>
                    </ul>
                </div>

                <!--美容仪器的内容-->
                <div class='content yiqi-content'
                    :class='{active:chooseIndex==3}'>
                    <ul class='content-ul'>
                        <li v-for='(item,index,key) in home.beauty_equipment' :key='key'>
                            <img :src="item.img" alt="">
                            <p class='goods_name'>{{item.goods_name}}</p>
                            <p class='goods_desc'>
                                <span class='desc1'>{{item.desc1}}</span>
                                <span class='desc2'>({{item.desc2}})</span>
                            </p>
                            <p class='buyed'>{{item.buy_num}}人已买</p>
                            <p class='goods_price'>
                                <span class='price'>￥{{item.price}}</span>
                                <span class='origin_price'>原价：<span>￥{{item.market_pri}}</span></span>
                                <span class='buy_btn'>立即购买</span>
                            </p>
                        </li>
                    </ul>
                </div>
            

            </div>

        </div>

        

        <!--底部导航-->
        <div class='tabList'>
            <div class='list active'>
                <i class='iconfont icon-home_light'></i>
                <p>首页</p>
            </div>
            <div class='list'>
                <i class='iconfont icon-faxian1'></i>
                <p>发现</p>
            </div>
            <div class='list'>
                <i class='iconfont icon-tuiguang'></i>
                <p>推广</p>
            </div>
            <div class='list'>
                <i class='iconfont icon-people'></i>
                <p>我的</p>
            </div>
        </div>
    </div>
    

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@1.4/lib/vant.min.js"></script>
<script src='../js/index.js'></script>
</body>
</html>